<!-- Vue组件的模板部分，定义了用户界面 -->
<template>
  <div>
    <!-- 输入框，用于输入新的留言，v-model指令用于双向数据绑定 -->
    <input type="text" v-model="newMessage" placeholder="请输入留言">
    <!-- 添加按钮，点击时会调用addMessage方法 -->
    <button @click="addMessage">留言</button>

    <!-- 留言列表 -->
    <div>
      <!-- 无序列表，用于显示留言 -->
      <ul>
        <!-- v-for指令用于循环遍历messages数组，展示每一条留言 -->
        <li v-for="(message, index) in messages" :key="index">
          <!-- 显示留言的索引和内容 -->
          {{ index + 1 }}: {{ message }}
        </li>
      </ul>
    </div>
  </div>
</template>

<!-- 脚本部分，包含Vue组件的数据和方法 -->
<script>
export default {
  // 组件的数据对象，用于存储数据 -->
  data() {
    return {
      // newMessage用于存储用户输入的新留言
      newMessage: '',
      // messages数组用于存储所有留言
      messages: []
    };
  },
  // 组件的方法，用于定义可调用的函数 -->
  methods: {
    // addMessage方法用于将新的留言添加到数组中 -->
    addMessage() {
      // 如果输入的内容去除首尾空白字符后不是空字符串 -->
      if (this.newMessage.trim() !== '') {
        // 将新留言添加到数组中 -->
        this.messages.push(this.newMessage);
        // 清空输入框的内容 -->
        this.newMessage = '';
      }
    }
  }
};
</script>

<!-- 样式部分，用于美化组件 -->
<style>
/* 在这里添加一些样式 */
</style>
